<script setup lang="ts">
defineProps<{
}>()

import { computed, ref } from 'vue';
import Cabinet from './Cabinet.vue';

</script>

<template>
  		<div class="desk">
			<!-- <div class="legs">
				<div class="deskleg leg-back-left"></div>
				<div class="deskleg leg-back-right"></div>
				<div class="deskleg leg-front-left"></div>
				<div class="deskleg leg-front-right"></div>
			</div> -->			
			<div class="desktop"></div>
		</div>
</template>

<style scoped>
 
		.desk{
			width: 80em;
			height: 40em;
			/* background-color: #313131; */
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;	
			perspective:110em;
			margin-top: 10em;
		}
		.desk .desktop{
			width: 100%;
			height: 100%;
			background-color: #d6d6d6;
			border-radius: 0.5em;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: -0.2em 3em 2em #313131;
			transform:rotateX(60deg);
		}

		.desk .legs{
			width: 100em;
			position: absolute;
			/* margin-top: 10em; */
			/* display: flex; */
		}

		.desk .deskleg{
			background-color: #d6d6d6;
			border-radius: 0.5em;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: -0.1em 2em 1em #313131;
			/* transform:rotateX(60deg); */
			position: absolute;
		}
		.desk .leg-back-left{
			width: 3em;
			height: 19em;
			left:16em;

		}
		.desk .leg-back-right{
			width: 3em;
			height: 19em;
			left:80em;
		}
		.desk .leg-front-left{
			width: 4em;
			height: 25em;
			left:10em;
		}
		.desk .leg-front-right{
			width: 4em;
			height: 25em;
			left:85em;

		}
	

		
</style>
